@import "reset";
@import "comment";
@font40:4.0em;
@font28:2.8em;
@font26:2.6em;
@font48:4.8em;
@font22:2.2em;
@font24:2.4em;
@margin32:32px;
@border-comment:2px solid #bdbdbd;
.comment-background{
  background-color: #e8eaf6;
}

.box-shadow(@x_offest,@y_offest,@blur_radius,@spread_radius,@color) {

@x_off : @x_offest*1px;
@y_off : @y_offest*1px;
@blur_rad : @blur_radius*1px;
@spread_rad : @spread_radius*1px;
  -webkit-box-shadow: @x_off @y_off @blur_rad @spread_rad @color;
  -moz-box-shadow:@x_off @y_off @blur_rad @spread_rad @color;
  box-shadow:@x_off @y_off @blur_rad @spread_rad @color;
}

.clear{
  clear: both;
}
.div-init(@width,@height,@left){
  height: @height*1px;
  width: @width*1px;
  border-bottom: @border-comment;
  margin-left: @left*1px;
  background-color: #ffffff;
}
.comment-content{
  margin-top:118px;
  .box-shadow(0,-1,3,0,rgba(222,222,222,0.1));
}
.comment-text(@color){
  font-size:@font28 ;
  float: right;
  color: @color;
}
.comment-title(@color){
  font-size: @font28;
  float: left;
  color: @color;
}
.comment-div-every(@height){
  &:nth-last-child(-n+2){
    border: 0px;
  }
  .div-init(659,@height,32);

}
.comment-probably{
  .div-init(720,89,0);

  .title{
    font-size: @font32;
    color: #748dfc;
    line-height: 89px;
    margin-left: 32px;
    float: left;
  }
  .text{
    font-size: @font32;
    color: #748dfc;
    line-height: 89px;
    margin-right: 32px;
    float: right;
  }

}
.transform(@deg){
  transform: rotate(@deg);
  -ms-transform: rotate(@deg);		/* IE 9 */
  -webkit-transform: rotate(@deg);	/* Safari and Chrome */
  -o-transform: rotate(@deg);		/* Opera */
  -moz-transform: rotate(@deg);		/* Firefox */
}
header {
  width: @width*1px;
  height: 111px;
  background-color: #5677fc;
 .box-shadow(0,1,1,1,rgba(64,88,187,0.5));
  border-bottom: 2px solid #747474;
  position:fixed;
  z-index: 100;
  top:0px;
  left: 0px;
  .back{
    width: 95px;
    height: 111px;
    .Background(0,0);
    position: absolute; top: 0; left: 0;
  }
  .font-header{
    color: #ffffff;

    font-size: @font40;
    line-height: 111px;
    text-align: center;
  }
}
/*
40我的开始
*/
#my-page-mine-edit{
  @backColor:#d0d9ff;
  background-color: @backColor;
  height: @height*1px;
  .mine-info{
    background-color: #455ede;
    .box-shadow(0,0,10,4,#7f859c);
    height: 408px;
    .mine-head-edit{
      .Background(0,-551);
      float: left;
      width: 54px;
      height: 46px;
      margin-top: 24px;
      margin-left: 53px;
    }
    .mine-head-portrait{
      float: left;
      margin-top: 56px;
      margin-left: 55px;

    }
    .mine-head-name{
     font-size: @font40;
      color: #ffffff;
      margin-left: 166px;

    }
  }
  .mine-operate{

    margin-top: 5px;
    .icon-info(@height){
      .div-init(547,122,@margin32);
      background-color: @backColor;
      line-height: 122px;
      .icon{
        .Background(0,@height);
        width: 48px;
        height: 46px;
        float: left;

        margin-top: 48px;
      }
      .information{
        color: #8f96b0;
        font-size: @font32;
        float: left;
        margin-left: 64px;
      }
      .right-arrow{
        .Background(0,-356);
        width: 14px;
        height: 24px;
        float: right;
        margin-top: 54px;
        margin-right: 86px;
      }
    }
    .exchange{
      .icon-info(-624);
    }
    .performance{
      .icon-info(-696);
    }
  }
  button{
    position: fixed;
    width: 320px;
    height: 72px;
    background-color: #455ede;
    border-radius:3px;
    left: 107px;
    bottom: @margin32;
    color: #ffffff;
    font-size: @font26;
  }
}
/*
40我的结束
*/

/*
41绩效开始
*/
#my-page-performance{
  .comment-background;
  .content{
    .comment-content;
    .time{
      background-color:#ffffff;
      height: 88px;
      line-height: 88px;
      border-bottom: @border-comment;
      font-size: @font32;
      color: #5677fc;
      text-indent:32px;
      border-bottom: @border-comment;
    }
    .detail{
      background-color:#ffffff;
      margin-top: 16px;
      border-bottom: @border-comment;
      height: 622px;
    }
  }
}
/*
40绩效结束
*/
/*
42交班开始
*/
#my-page-exchange{
  .comment-background;
  .content{
    .comment-content;
   .time{
     background-color:#ffffff;
     height: 88px;
     line-height: 88px;
     border-bottom: @border-comment;
     font-size: @font32;
     color: #5677fc;
     text-indent:32px;
     border-bottom: @border-comment;
   }
   .info{
     //padding-bottom: 15px;
     background-color:#ffffff;
     margin-top: 16px;
     border-bottom: @border-comment;

     .work-journal{
       .div-init(658,240,30);

     /*  height: 240px;
       width: 658px;
       border-bottom: @border-comment;
       margin-left: 30px;*/
      p{
       float: left;
        margin-top: 38px;
        color: #404040;
        font-size: @font28;
      }
       textarea{
         float: right;
         height: 175px;
         width: 496px;
         background-color: #e0e0e0;
         margin-top: 32px;
       }

     }

     .div-every{
       width: 659px;
       height: 92px;
       line-height: 92px;
       border-bottom:2px solid #e0e0e0;
       position: relative;
       margin-left: 32px;
       .text{
         .comment-text(#969696);
         margin-right: 68px;
       }
       .title{
         .comment-title(#404040);
       }
       .right-arrow{
         .Background(16,-322);
         width: 32px;
         height: 92px;
         float: right;
       }

     }
   }
  }
  button{
    position: fixed;
    bottom: 20px;
    left: 10%;
    width: 592px;
    height: 72px;
    background-color: #455ede;
    .box-shadow(-1,3,0,0,#aeadad);
    font-size: @font26;
    color: #ffffff;
  }
}
/*
42交班结束
*/
/*
43 修改信息开始
*/
#my-page-change-info{
  .comment-background;

  .content{
    background-color: #ffffff;
    .comment-content;
    height: 516px;

    .text{
      .comment-text(#969696);
      //.comment-text;
    }
    .title{
      .comment-title(#404040);
    }
    .div-every{
      width: 659px;
      height: 138px;
      line-height: 138px;
      border-bottom:2px solid #e0e0e0;
      position: relative;
      margin-left: 32px;
    }
    .contents-head-portrait{
      .div-every;
      .head{
        position: absolute;
        left: 0px;
        top:18px;
        .Background(0,-125);
        width:102px;
        height: 101px;
      }

    }
    .contents-info{
      .div-every;
      height: 94px;
      line-height: 94px;
    }
  }
  button{
    position: fixed;
    bottom: 20px;
    left: 10%;
    width: 592px;
    height: 72px;
    background-color: #455ede;
    .box-shadow(-1,3,0,0,#aeadad);
    font-size: @font26;
    color: #ffffff;
  }

}
/*
43 修改信息结束
*/

/*
44绩效开始
*/
#my-page-performance-detail{
  #my-page-exchange;
  .work-info{
    float: right;
    height: 175px;
    width: 496px;
    color: red;
    margin-top: 32px;
    font-size: @font28;
  }
/*  .comment-background;
  .content{
    .comment-content;
    .time{
      background-color:#ffffff;
      height: 88px;
      line-height: 88px;
      border-bottom: @border-comment;
      font-size: @font32;
      color: #5677fc;
      text-indent:32px;
      border-bottom: @border-comment;
    }
    .info{
      //padding-bottom: 15px;
      background-color:#ffffff;
      margin-top: 16px;
      border-bottom: @border-comment;

      .work-journal{
        .div-init(658,240,30);

        /!*  height: 240px;
          width: 658px;
          border-bottom: @border-comment;
          margin-left: 30px;*!/
        p{
          float: left;
          margin-top: 38px;
          color: #404040;
          font-size: @font28;
        }
        .work-info{
          float: right;
          height: 175px;
          width: 496px;
          color: red;
          margin-top: 32px;
          font-size: @font28;
        }

      }

      .div-every{
        width: 659px;
        height: 92px;
        line-height: 92px;
        border-bottom:2px solid #e0e0e0;
        position: relative;
        margin-left: 32px;
        .text{
          .comment-text(#969696);
          margin-right: 68px;
        }
        .title{
          .comment-title(#404040);
        }
        .right-arrow{
          .Background(16,-322);
          width: 32px;
          height: 92px;
          float: right;
        }

      }
    }
  }*/

}
/*
44绩效结束
*/
/*
45服务开始
*/
#my-page-service{
  .comment-background;
  .content{
    .comment-content;
    .probably{
      .comment-probably;
     /* .div-init(720,89,0);

      .title{
        font-size: @font32;
        color: #748dfc;
        line-height: 89px;
        margin-left: 32px;
        float: left;
      }
      .text{
        font-size: @font32;
        color: #748dfc;
        line-height: 89px;
        margin-right: 32px;
        float: right;
      }*/
    }
     .detail{
       background-color:#ffffff;
       margin-top: 16px;
       border-bottom: @border-comment;
       border-top: @border-comment;
       .div-every{
         &:nth-last-child(-n+2){
          border: 0px;
         }
         .div-init(659,94,32);
         @lineheight:94px;
         position: relative;

         .title{
           .comment-title(#a5a5a5);
           line-height: @lineheight;
         }
         .info{
           .comment-title(#a5a5a5);
           margin-left: 40px;
           line-height: @lineheight;
         }
         .time{
           .comment-text(#404040);
           line-height: @lineheight;
         }

       }
     }

  }
}
/*
45服务结束
*/

/*
46收款开始
*/
#my-page-get-money{
  .comment-background;
  .content{
    .comment-content;
    .probably{
      .comment-probably;
    /*  .div-init(720,89,0);

      .title{
        font-size: @font32;
        color: #748dfc;
        line-height: 89px;
        margin-left: 32px;
        float: left;
      }
      .text{
        font-size: @font32;
        color: #748dfc;
        line-height: 89px;
        margin-right: 32px;
        float: right;
      }*/
    }
    .money-type{
      background-color:#ffffff;
      margin-top: 16px;
      border-bottom: @border-comment;
      border-top: @border-comment;
      .total{
        .div-init(659,94,32);
      @lineheight:94px;
        .text{
          .comment-text(#969696);
          line-height: @lineheight;
        }
        .title{
          .comment-title(#404040);
          line-height: @lineheight;
        }
      }
      .div-every{
        &:nth-last-child(-n+2){
          border: 0px;
        }
        .div-init(659,94,32);
        @lineheight:94px;
        //position: relative;

        .title{
          .comment-title(#a5a5a5);
          line-height: @lineheight;
        }
        .info{
          .comment-title(#a5a5a5);
          margin-left: 40px;
          line-height: @lineheight;
        }
        .time{
          .comment-text(#404040);
          line-height: @lineheight;
        }

      }
    }
  }
}
/*
收款结束
*/

/*
47退款开始
*/
#my-page-back-money{
  .comment-background;
  .content{
    .comment-content;
    .probably{
      .comment-probably;
     /* .div-init(720,89,0);

      .title{
        font-size: @font32;
        color: #748dfc;
        line-height: 89px;
        margin-left: 32px;
        float: left;
      }
      .text{
        font-size: @font32;
        color: #748dfc;
        line-height: 89px;
        margin-right: 32px;
        float: right;
      }*/
    }
    .detail{
      background-color:#ffffff;
      margin-top: 16px;
      border-bottom: @border-comment;
      .div-every{
        &:nth-last-child(-n+2){
          border: 0px;
        }
        .div-init(659,94,32);
        @lineheight:94px;


        .title{
          .comment-title(#969696);
          line-height: @lineheight;
        }
        .info{
          .comment-title(#969696);
          margin-left: 40px;
          line-height: @lineheight;
        }
        .time{
          .comment-text(#969696);
          line-height: @lineheight;
        }
        .reason{
          .comment-title(#e51c23);
          margin-left: 48px;
          line-height: @lineheight;
        }
      }
    }
  }
}
/*
退款结束
*/

/*
48会员增加开始
*/
#my-page-member-add{
  .comment-background;
  .content{
    .comment-content;
    .probably{
      .comment-probably;

    }
    .detail{
      background-color:#ffffff;
      margin-top: 16px;
      border-bottom: @border-comment;
      .div-every{
        &:nth-last-child(-n+2){
          border: 0px;
        }
        .div-init(659,94,32);
        @lineheight:94px;


        .title{
          .comment-title(#969696);
          line-height: @lineheight;
        }
        .name{
          .comment-title(#969696);
          margin-left: 40px;
          line-height: @lineheight;
        }
        .money{
          .comment-text(#969696);
          line-height: @lineheight;
        }
        .mobile{
          .comment-title(#969696);
          margin-left: 48px;
          line-height: @lineheight;
        }
      }
    }
  }
}
/*
48会员增加结束
*/

/*
49能力值开始
*/
#my-page-ability-value{
  .comment-background;
  .content{
    .comment-content;
    .probably{
      .comment-probably;
    }
    .detail{
      background-color:#ffffff;
      margin-top: 16px;
      border-bottom: @border-comment;
      .div-every{
        .comment-div-every(94);
        @lineheight:94px;
        .title,.info,.operate,.text{
          line-height: @lineheight;
        }
        .title,.info,.operate{
          .comment-title(#969696);

        }
        .info{
          margin-left: 40px;
        }
        .text{
          .comment-text(#969696);
        }
        .operate{
          margin-left: 48px;
        }
      }
    }
  }
}
/*
49
*/
/*
50会员详情开始
*/
#my-page-member-info{

  .comment-background;
  .content{
    //background-color: #ffffff;
    .comment-content;
    //height: 715px;
    .member-info{
      background-color:#ffffff;
      height: 138px;
      border-bottom: @border-comment;
      padding-top: 35px;
      p{
          font-size: @font28;
          color: #414141;
          margin-left: 35px;
        margin-top: 16px;
      }

    }
    .member-left-money{
      height: 93px;
      line-height: 93px;
      background-color: #ffffff;
      border-top:@border-comment ;
      border-bottom:@border-comment ;
      margin-top: 16px;
      position: relative;
      .add{
          position: absolute;

          left:26px;
          .Background(0,-236);
          width: 68px;
           height: 93px;
      }
      .money{
        font-size: @font32;
        float: right;
        margin-right: 32px;
        color: #455ede;
      }
    }
    .member-habit{

      padding-bottom: 15px;
      background-color:#ffffff;
      margin-top: 16px;
      border-bottom: @border-comment;
      border-top: @border-comment;
      .div-every{
        .text{
          .comment-text(#969696);
          color: #969696;
        }

        .title{
          .comment-title(#404040);
          color: #404040;
        }
        width: 659px;
        height: 92px;
        line-height: 92px;
        border-bottom:2px solid #e0e0e0;
        position: relative;
        margin-left: 32px;
      }
      .div-right-46{
        margin-right: 46px;
      }
      .dishes{
         //overflow:hidden;//清除浮动的方式，没有clear好用
         p{
           height: 96px;
           line-height: 96px;
           font-size:@font28 ;

           margin-left: 32px;
           color: #414141;
           width: 100%;
         }
        .love-cp{
          //overflow:hidden;
          margin-left: 65px;

          .love-every-cp{
            &:nth-child(3n+0){
              margin-right: 0px;
            }
            margin-right: 103px;
            position: relative;
            z-index: 1;
            float: left;
            .time{
              position: absolute;
              top: 24px;
              left: 8px;
              width: 96px;
              height: 32px;
              line-height: 32px;
              text-align:center;
              background-color: #e84e40;
              font-size: @font20;
              color: #fbe5e4;
              .transform(-15deg);
              //transform: rotate(-15deg);
              .box-shadow(1,1,1,1,#727070);

            }

            .dishes{

              width: 128px;
              line-height: 128px;
              height: 110px;
              background-color: #ffc107;
              margin-top: 34px;
              color: #533d01;
              font-size: @font20;
              text-align:center;
              .box-shadow(1,1,1,1,#727070);
            }


          }
        }
      }


    }

  }
}
/*
50会员详情结束
*/

/*
50服务详情开始
*/
#my-page-service-info{
  .comment-background;
  .content{
    .comment-content;
    /*桌台信息*/
    .table{
      @height:138px;
      .div-init(720,@height,0);
       .icon{
        .Background(0,-389);
         height: @height;
         width: 81px;
         margin-left: 32px;
         float:left;
       }
      .name{

        .comment-title(#5677fc);
        font-size: @font40;
         line-height: @height;
         margin-left: 34px;
      }

    }

    .chat{
      .font(@color,@float){
        font-size: @font24;
        color: @color;
        float: @float;

      }
      .chat-content(@color){
        word-wrap: break-word;
        word-break: normal;
        background-color: #ffffff;
        padding: 25px 32px;
        color: @color;
        font-size: @font28;
        margin-top: 10px;
        max-width: 480px;

      }
      .chat-father-node(@float){
        margin-top: 22px;
        margin-bottom: 22px;
        margin-left: 32px;
        margin-right: 32px;
        float: @float;
      }
      /*顾客聊天信息*/
      .others{
        .chat-father-node(left);

        .customer-name{
          .name{
            .font(#5677fc,left);

          }
          .time{
            .font(#5677fc,left);
            margin-left: 35px;
          }
        }
        .customer-need{
          .chat-content(#969696);

        }

      }
     /*我的聊天信息*/
      .mine{
        .chat-father-node(right);
        .my-name{
          .name{
            .font(#ff5722,right);
            margin-right: 35px;
          }
          .time{
            .font(#ff5722,right);

          }
        }
        .my-need{
          .chat-content(#404040);
          padding: 22px 48px 28px 34px;


          .service{
            margin-left: 22px;
            margin-top: 10px;
          }
        }
      }
    }

  }
}
/*
50服务详情结束
*/